<template>
  <div  v-title="'车辆管理 - 世外票务云平台'">
    <mk-breadcrumb :is-return="false" :breadcrumb-data="breadcrumbData"></mk-breadcrumb>
    <el-scrollbar :wrapStyle="[{maxHeight:(bodyHeight-fixedHeightSmall)+'px'}]">
    <div class="PublicListStyle MkCarMgt">
        <template v-if='beforeGetFocus'>
          <div class='searchDiv marginBottom-20'>
            <i class='el-icon-search searchBtn'></i>
            <el-input  placeholder="编号/车牌号" class='searchInput' @focus='onFousEvent'></el-input>
            <mk-permission :perms="['Ticket:LineManagement:Bus:create']">
              <el-button type="primary" size="" @click="addCar" class='floatRight btn-create'>添加车辆</el-button>
            </mk-permission>
          </div>
        </template>
        <template v-else>
          <div class='onfousInput marginBottom-20'>
            <div class='onfocusInputContent'>
              <i class='el-icon-search searchBtn1'></i>
              <el-input placeholder="编号/车牌号"  class='searchInput1' :maxlength='20'  v-model='searchCondition.search' @keyup.native.enter='searchByCondition' ref='searchInput1'></el-input>
              <i class='el-icon-close closeSearch' @click='closeSearch("searchForm")'></i>
              <el-button type='primary' class='btn-cancel resetCustomer' @click='resetCondition("searchForm")'>条件重置</el-button>
              <el-button type='primary' class='btn-primary searchCustomer' @click='searchByCondition'>搜索</el-button>
              <div class='lineStyle'></div>
            </div>
          </div>
        </template>

        <div class="tabContainer primary_bg trHasCursor"   v-loading="loadingTab"
             element-loading-text="拼命加载中">
          <el-table
            @row-click="showDetail"
            :data="dataArr.elements"
            style="width: 100%">
            <el-table-column
              prop="number"
              label="编号"
              width="">
            </el-table-column>
            <el-table-column
              prop="plateNumber"
              label="车牌号"
              width="">
            </el-table-column>
            <el-table-column
              prop="seatCounts"
              label="票数">
            </el-table-column>

          </el-table>
          <el-pagination v-if='dataArr.elements.length>0'
            @current-change="handleCurrentChange"
            :current-page="dataArr.page"
            :page-size="dataArr.size"
            layout="total, prev, pager, next"
            :total="dataArr.totalAmount">
          </el-pagination>
        </div>
    </div>
    </el-scrollbar>
    <!--添加/编辑车辆-->
    <mk-add-car :showDialog='dialogVisible_add'  v-on:closeDialog='closeDialog_add'></mk-add-car>

    <!--车辆详情-->
    <mk-car-detail :showDialog='dialogVisible_detail' :currentCar='currentCar'  v-on:closeDialog='closeDialog_detail'></mk-car-detail>
</div>
</template>

<script>
import MkBreadcrumb from '../../../components/MkBreadcrumb.vue'
import MkCarDetail from './MkCarDetail.vue'
import MkAddCar from './MkAddCar.vue'
import MkPermission from "../../../components/MkPermission";
import routeService from '../../../services/route'
import { mapState } from 'vuex'
export default {
  name: 'MkCarMgt',
  components: {
    MkBreadcrumb,MkCarDetail,MkAddCar,MkPermission
  },
  methods: {
    closeDialog_detail(type) {
      if(type == 'yes') {
        if(this.dataArr.page != 1 && (this.dataArr.totalAmount == (this.dataArr.page - 1) * (this.dataArr.size) + 1)){
          this.searchCondition['page.pn'] = this.searchCondition['page.pn']-1;
        }
        this.loadData();
      }
      this.dialogVisible_detail = false;
    },
    showDetail(row) {
      this.currentCar = row;
      this.dialogVisible_detail = true;
    },
    closeSearch(formName) {
     this.resetForm(formName);
      this.beforeGetFocus = true;
      this.loadData();
    },
    resetForm(formName) {
//      this.$refs[formName].resetFields();
      this.searchCondition.search = '';
      this.searchCondition['page.pn'] = 1;
    },
    resetCondition(formName) {
      this.resetForm(formName);
      this.loadData();
    },
    onFousEvent() {
      this.beforeGetFocus = false;
      this.$nextTick(function(){
        this.$refs.searchInput1.$el.children[0].focus();
      });
    },
    handleCurrentChange(val) {
      this.searchCondition['page.pn'] = val;
      this.loadData();
    },
    addCar() {
      this.currentStaff = null;
      this.dialogVisible_add = true;
    },
    searchByCondition() {
      this.searchCondition['page.pn'] = 1;
      this.loadData();
    },
    loadData() {
      this.loadingTab = true;
      routeService.loadCarList(this.searchCondition,(data)=>{
        data.data.totalAmount = parseInt(data.data.totalAmount);
        this.dataArr = data.data;
        this.loadingTab = false;
      });
    },

    closeDialog_add(type) {
      this.dialogVisible_add = false;
      this.dialogVisible_detail = false;
      if(type == 'yes') {
        this.loadData();
      }
    },
  },
  watch: {
  },
  computed: mapState({
    bodyHeight: state => state.global.bodyHeight,
    fixedHeightSmall: state => state.global.fixedHeightSmall,
  }),
  mounted: function() {
    this.loadData();
  },
  data () {
    return {
      dialogVisible_detail:false,
      dialogVisible_add: false,
      loadingTab: false,
      beforeGetFocus: true,
      currentCar: {},
      searchCondition: {
        'page.pn': 1,
        'page.size': 10,
        fields: 'id,number,plateNumber,seatCounts',
        search: '',
      },
      title: '',
      breadcrumbData: {
        list: {
          first: {name:'线路管理',path: null, isClickAble: false},
          second: {name: '车辆管理',path: null, isClickAble: false}
        },
        menuIconStyle : 'routeIconStyle'
      },
      dataArr: {
        page: '',
        size: '',
        totalAmount: '',
        totalPages: '',
        elements: []
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='less'>
</style>
